<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${session.user.userName}+'的关注-浮生若梦'">我的关注-浮生若梦</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link rel="stylesheet" type="text/css" href="css/pageCss.css">
    <style>
        body {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-image: url("img/nier-gaosi.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body ondragstart="return false">
<div th:replace="part/nav ::nav"></div>
<div class="container" style="margin-top: 4%">
    <div class="col-md-4">
        <div class="bg">我的关注</div>
    </div>
    <div class="col-md-8">
        <div th:if="${pageInfo.list.size()>0}" th:each="follow:${pageInfo.list}">
            <div class="bg">
                <div class="col-md-1">
                    <div>
                        <img class="hand"
                             th:onclick="'skip(\'/browseUser.htm?id='+${follow.userId}+'\')'"
                             th:src="${follow.userImage}" style="width:50px;height: 50px;object-fit: cover;border-radius: 50%">
                    </div>
                </div>
                <div class="col-md-10 hand" style="padding-top: 5px">
                    <div th:onclick="'skip(\'/browseUser.htm?id='+${follow.userId}+'\')'">
                        <div>
                            <div th:text="${follow.userName}"></div>
                        </div>
                        <div>
                            <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                                 th:text="${follow.userDetail}"></div>
                        </div>
                    </div>
                </div>
                <div style="padding-top: 15px">
                    <a class="btn-sm sm-btn btn-default" th:id="follow+${follow.userId}"
                       th:onclick="'listFollow('+${follow.userId}+')'">已关注</a>
                </div>
                <br>
            </div>
        </div>
        <div th:if="${pageInfo.list.size()>0}" style="opacity: 0.7;" align="center">
            <nav>
                <!--pageInfo.pages-4>=pageInfo.pageNum?-->
                <!--分页-->
                <ul class="pager">
                    <li class="previous" th:classappend="${pageInfo.hasPreviousPage?'':'disabled'}"><a
                            style="color: black;" th:styleappend="${pageInfo.hasPreviousPage?'cursor: pointer;':''}"
                            th:onclick="hasPre([[${pageInfo.hasPreviousPage}]],[[${pageInfo.prePage}]],[[${url}]]);"><label
                            class="glyphicon glyphicon-arrow-left"></label>&nbsp;上一页</a></li>
                    <li th:each="num:${#numbers.sequence(pageInfo.pageNum-4>0?pageInfo.pageNum+4>pageInfo.pages?pageInfo.pages-8:pageInfo.pageNum-4:1,pageInfo.pages-pageInfo.pageNum>4?pageInfo.pageNum-4<=0?9:pageInfo.pageNum+4:pageInfo.pages)}">
                        <a style="color: black;"
                           th:styleappend="${num==pageInfo.pageNum?'background-color: #449d44':''}" th:text="${num}"
                           th:href="${url}+${num}"></a></li>
                    <li class="next" th:classappend="${pageInfo.hasNextPage?'':'disabled'}">
                        <a style="color: black;"
                           th:styleappend="${pageInfo.hasNextPage?'cursor: pointer;':''}"
                           th:onclick="hasNext([[${pageInfo.hasNextPage}]],[[${pageInfo.nextPage}]],[[${url}]]);">下一页&nbsp;<label
                                class="glyphicon glyphicon-arrow-right"></label></a></li>
                </ul>
            </nav>
        </div>
        <div th:if="${pageInfo.list.size()<=0}" class="bg">
            你还没关注任何人~
        </div>
    </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/follow.js"></script>
<script>
    //如果有前一页跳转
    function hasPre(hasPre, prePage, url) {
        if (hasPre == true) {
            window.location.href = url + prePage;
        }
    }

    //如果有后一页跳转
    function hasNext(hasNext, nextPage, url) {
        if (hasNext == true) {
            window.location.href = url + nextPage;
        }
    }
    function skip(href) {
        window.location.href = href;
    }
</script>
</body>
</html>